<template>
	<view class="page" v-if="info">
		<view class="pay-price">
			<view class="price">
				<text class="unit">￥</text>
				<view class="money" style="color:#E93323;font-size:40rpx;line-height: 1;">
					{{info.pay_price}}
				</view>
			</view>
			<view class="count-down">
				支付剩余时间： <up-count-down :time="(info.invalid_time-(Date.now()/1000))*1000" format="HH:mm:ss"></up-count-down>
			</view>
		</view>
		<view class="payment">
			<view class="title">
				支付方式
			</view>
			<view class="item" @click="payType=1" >
				<view class="left">
					<up-icon name="weixin-fill" color="#09BB07" size="48rpx"></up-icon>
					<view class="text">
						<view class="name">微信支付</view>
						<view class="info">使用微信快捷支付</view>
					</view>
				</view>
				<view class="icon" :class="{on:payType==1}">
					<up-icon name="checkmark" color="#fff" size="28rpx"></up-icon>
				</view>
			</view>
			<view class="item" @click="payType=2" >
				<view class="left">
					<up-icon name="red-packet" color="#FF9900" size="48rpx"></up-icon>
					<view class="text">
						<view class="name">余额支付</view>
						<view class="info" >
							可用余额 <span class="money">￥{{info.now_money}}</span>
						</view>
					</view>
				</view>
				<view class="icon" :class="{on:payType==2}">
					<up-icon name="checkmark" color="#fff" size="28rpx"></up-icon>
				</view>
			</view>
		</view>
		<view class="btn">
			<view class="button" @click='goPay'>确认支付</view>
			<view class="wait-pay" @click="waitPay">暂不支付</view>
		</view>
	</view>
</template>

<script setup>
	import {ref} from "vue"
	import {payApi} from "@/api/products.js"
	import {onLoad} from "@dcloudio/uni-app"
	import {payInfo} from "@/api/products.js"
	const payType=ref(1)
	const order_id=ref('')
	const info=ref('')
	onLoad( async (obj)=>{
		order_id.value=obj.orderId
		let res=await payInfo(obj.orderId)
		info.value=res.data
	})
	const goPay=async ()=>{
		uni.showLoading({
			mask:true,
			title:'支付中...'
		})
		const res = await payApi({
			"paytype":payType.value==1?"weixin":'yue',
			"type":0,
			"uni": order_id.value
		})
		const data=res.data
		if(payType.value==1){
			data.result.jsConfig.timeStamp=data.result.jsConfig.timestamp
			delete data.result.jsConfig.timestamp
			wx.requestPayment({
				...data.result.jsConfig,
				success (res) {
					uni.hideLoading()
					uni.redirectTo({
						url:'./result?type=1&orderId='+order_id.value
					})
				},fail (err) {
					uni.hideLoading()
					uni.redirectTo({
						url:'./result?type=0&orderId='+order_id.value
					})
				}
				
			})
		}else{
			uni.hideLoading()
			if(data.status=='SUCCESS'){
				uni.redirectTo({
					url:'./result?type=1&orderId='+order_id.value
				})
			}else{
				uni.$u.toast(res.msg)
			}
			
		}
	}
	const waitPay=()=>{
		uni.redirectTo({
			url:'./result?type=0&orderId='+order_id.value
		})
	}
</script>

<style lang="scss">
	page{
		background-color: #F5F6FA;
	}
	.page {
		.pay-price {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			padding: 50rpx 0 40rpx 0;

			.price {
				color: #E93323;
				margin-bottom: 20rpx;
				display: flex;
				align-items: flex-end;

				.unit {
					font-size: 34rpx;
					font-weight: 500;
					line-height: 41rpx;
				}

				.num {
					font-size: 50rpx;
					font-weight: 600;
				}
			}

			.count-down {
				display: flex;
				align-items: center;
				background-color: #fff;
				padding: 8rpx 28rpx;
				border-radius: 40rpx;
				font-size: 24rpx;
				color: #E93323;
				::v-deep{
					.u-count-down__text{
						color:#F5493D;line-height: 1;font-size:24rpx;
					}
				}
			}
		}

		.payment {
			width: 690rpx;
			border-radius: 14rpx 14rpx;
			background-color: #fff;
			z-index: 999;
			margin: 0 30rpx;

			.title {
				color: #666666;
				font-size: 26rpx;
				padding: 30rpx 0 0 30rpx;
			}

			.payMoney {
				font-size: 28rpx;
				color: #333333;
				text-align: center;
				margin-top: 50rpx;

				.font-color {
					margin-left: 10rpx;

					.money {
						font-size: 40rpx;
					}
				}
			}
			.item{
				display: flex;
				align-items: center;
				.left{
					flex:1;
					display: flex;align-items: center;
					.text{
						margin-left:30rpx;
					}
				}
				.icon{
					width:36rpx;height:36rpx;
					display: flex;align-items: center;
					justify-content: center;
					border-radius: 80rpx;
					box-sizing: border-box;
					border:3rpx solid #999;
					margin-right:12rpx;
					&.on{
						background-color: #FD2A00;
						border-color: #FD2A00;
					}
				}
				
			}
			

		}

		.payment.on {
			transform: translate3d(0, 0, 0);
		}

		.icon-xuanzhong11 {
			color: #E93323 !important;
		}

		.payment .item {
			border-bottom: 1rpx solid #eee;
			height: 130rpx;
			margin-left: 30rpx;
			padding-right: 30rpx;
		}

		.payment .item:last-child {
			border-bottom: none;
		}

		.payment .item .left {
			flex: 1;
		}

		.payment .item .left .text {
			flex: 1;
		}

		.payment .item .left .text .name {
			font-size: 30rpx;
			color: #333;
		}

		.payment .item .left .text .info {
			font-size: 22rpx;
			color: #999;
		}

		.payment .item .left .text .info .money {
			color: #ff9900;
		}

		.payment .item .left .iconfont {
			font-size: 50rpx;
			color: #09bb07;
			margin-right: 28rpx;
		}

		.payment .item .left .iconfont.icon-zhifubao {
			color: #00aaea;
		}

		.payment .item .left .iconfont.icon-yuezhifu {
			color: #ff9900;
		}

		.payment .item .left .iconfont.icon-yuezhifu1 {
			color: #eb6623;
		}

		.payment .item .left .iconfont.icon-tonglianzhifu1 {
			color: #305fd8;
		}

		.payment .item .iconfont {
			font-size: 40rpx;
			color: #ccc;
		}

		.icon-haoyoudaizhifu {
			color: #F34C3E !important;
		}

		.btn {
			position: fixed;
			left: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			bottom: 30rpx;
			bottom: calc(30rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
			bottom: calc(30rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
			text-align: center;
		}

		.wait-pay {
			color: #aaa;
			font-size: 24rpx;
			padding-top: 20rpx;
		}

		.button {
			width: 690rpx;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 45rpx;
			color: #FFFFFF;
			background-color: #E93323;

		}

	}
</style>
